<template>
    <el-container>
        <el-header>
            <div class="logo">
                <img src="@/assets/logo.jpg" style="height: 100%;float: left;display: block"/>
                <h3 style="width: 65%;height: 100%;line-height: 60px;padding-left:10px;margin-top:0px; float: left;">
                    医院预约挂号系统</h3>
            </div>
            <div class="nav">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="head">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                     <el-avatar shape="square"
                                :src="userinfo?.picture"></el-avatar>
                      <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="210px">
                <!--:router开启el-menu路由模式. 叶子菜单 index路由路径-->
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        :unique-opened="true"
                        :router="true"
                >
                    <el-menu-item index="/">
                        <i class="el-icon-s-home"></i>
                        系统首页
                    </el-menu-item>
                    <el-submenu v-for="item in leftMenu" :index="item.menuId+''">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.menuName}}</span>
                        </template>
                        <el-menu-item v-for="child in item.children" :index="child.path">
                            <i :class="child.icon"></i>
                            {{child.menuName}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                userinfo: undefined,
                leftMenu: undefined,
            }
        },
        created() {
            this.loadUserinfo();
            this.initLeftMenu();
        },
        methods: {
            initLeftMenu(){
               this.$http.get("/system/api/menu/leftMenu").then(result=>{
                    this.leftMenu=result.data.data;
               })
            },

            handleCommand(command) {
                if(command==="info"){

                }else if(command==="logout"){
                    this.$http.get("/system/api/user/logout").then(result=>{
                          sessionStorage.clear();
                          this.$router.push("/login");
                    })
                }
            },
            loadUserinfo() {
                this.$http.get("/system/api/user/info").then(result => {
                    this.userinfo = result.data.data;
                })
            }
        }
    }
</script>

<style scoped>
    .el-container {
        height: 100%;
    }

    .el-header {
        background-color: #ffffff;
        color: black;
        line-height: 60px;

    }

    .el-header > .logo {
        width: 210px;
        height: 100%;
        float: left;
        margin-left: -20px;
    }

    .el-header > .nav {
        width: 20%;
        height: 100%;
        line-height: 60px;
        float: left;
    }

    .el-header > .head {
        width: 50%;
        height: 100%;
        float: right;
        text-align: right;
    }

    span.el-avatar.el-avatar--square {
        margin-top: 10px;
    }

    .el-breadcrumb {
        line-height: 60px;
    }

    .el-aside {
        height: 100%;
        background-color: #ffffff;
        color: black;
        overflow-x: hidden;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .el-main {
        background-color: #F8F8FF;
        color: #333;
        border-radius: 5px;
        height: 100%;

    }

    .el-card__body, .el-main {
        padding: 5px;
    }


</style>
